﻿@page "/NavMenu"

@using FluentUI.Demo.Shared.Pages.NavMenu.Examples

<PageTitle>@App.PageTitle("NavMenu")</PageTitle>

<h1>NavMenu, NavGroup and NavLink</h1>

<div class="demopanel" style="text-align:center; margin-bottom: 10px">
    <b>IMPORTANT</b>
    <p>
        With version 3.2 a new, much improved, set of components to build side-bar menus has been added.
    </p>
    <p>
        <b>
            If you DO NOT want to upgrade to these new menu components, you can continue to use the pre-version 3.2 components. The only thing
            you need to do is to change the name of the <code>FluentNavMenu</code> component in your application to <code>FluentNavMenuTree</code>.
        </b>
    </p>
    <p>
        Everything works exactly as before by changing the name of this <code>FluentNavMenu</code> component in your application. (This probably needs to be done
        in one place only). The <code>FluentNavMenuGroup</code> and <code>FluentNavMenuLink</code> components have not been changed and do not need to be altered.
    </p>
    <p>
        We consider the <code>FluentNavMenuTree</code>, <code>FluentNavMenuGroup</code> and <code>FluentNavMenuLink</code> components as deprecated and will remove them in a future version.
    </p>
    <p>
        If you wish to upgrade to the new menu components, please refer to the <a href="/UpgradeGuide">Upgrade guide</a> for more information.
    </p>
</div>

<p>
    The <code>FluentNavMenu</code>, <code>FluentNavGroup</code> and <code>FluentNavLink</code> components can be used to build
    hierarchical, collapsible and expandable side-bar menus. They can range from simple 1-level deep list to complex multi-level menu 
    structures (with a max of 5 levels). 
</p> 
<p>
    These components are designed to work together and are not to be used stand-alone.
</p>

<h2 id="example">Examples</h2>

<DemoSection Component="typeof(NavMenuDefault)" Title="Submenus, icons and plain">
    <Description>
        This demo shows 3 different versions of a <code>NavMenu</code> (with <code>FluentNavGroup</code>s and <code>FluentNavLink</code>)s.
        From left to right:
        <ul>
            <li>Menu with several sub-menus, icons, etc. The first group (Item 3) uses both the <code>Title</code> as the <code>TitleTemplate</code> parameters</li>
            <li>Menu without sub-menus but with icons</li>
            <li>Menu with just text links</li>
        </ul>
    </Description>
</DemoSection>

<DemoSection Component="typeof(NavMenuCollapsible)" Title="Collapsible navigation">
    <Description>
        <p>
            More complete example which shows how the menu works together with a text section when it collapses.
            When <code>CollapsedChildNavigation</code> is set to true, clicking on a <code>FluentNavGroup</code> opens a menu containing all links included in that group.
        </p>
        <p>
            Note that menu items without an icon are not visible when the menu is collapsed.
        </p>
    </Description>
</DemoSection>

<DemoSection Component="typeof(NavMenuDataBound)" Title="Data bound">
    <Description>
        An example of binding to the <code>Expanded</code> parameter.
    </Description>
</DemoSection>

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentNavMenu)" />

<ApiDocumentation Component="typeof(FluentNavGroup)" />

<ApiDocumentation Component="typeof(FluentNavLink)" />
